<template>
  <div class="recommend">
    <p class="recommend__title">热销推荐</p>
    <ul class="recommend-item">
        <router-link class="border-bottom"
                     v-for="item of recommend"
                     :key="item.id"
                     :to="'/detail/' + item.id"
                     tag="li"
        >
          <div class="item__img"><img :src='item.imgUrl' alt=""></div>
          <div class="item__content">
            <p class="content__title">{{item.title}}</p>
            <p class="content__txt">{{item.desc}}</p>
            <a href="" class="content__btn">查看详情</a>
          </div>
      </router-link>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'recomend',
  props: {
    recommend: Array
  }
}
</script>

<style lang="stylus" scoped>
@import "~@/assets/css/varible.styl"
.recommend
  margin-top: 10px;
  .recommend__title
    padding: 16px; 0 16px 20px;
    background: #eee;
  .recommend-item li
    display: flex
    border-bottom: 1px solid #eee;/*no*/
    .item__img > img
        height: 180px;
        width: 180px;
        padding: 20px;
    .item__content
      flex: 1
      min-width: 0;
      padding: 20px 0;
      p
        txt-elipsis()
      .content__title
        padding-bottom: 10px;
        font-size: 32px;/*px*/
      .content__txt
        padding-bottom: 20px;
        color: #ccc;
      .content__btn
        padding: 5px 10px;
        color: #fff;
        background: #ff9300;
        border-radius: 5px;
</style>
